<template>
  <div class="copy">
    <div class="copy_box">
      <div class="title-box">
        抄送列表
      </div>
      <div class="copy-table-box">
        <el-table
            :data="tableData"
            stripe
            style="width: 100%;height: 91vh;"
            border
            max-height="91vh"
            empty-text="暂无数据"
        >
          <el-table-column
              fixed
              prop="approve_id"
              label="ID"
              width="200"
              align="center"
          />
          <el-table-column
              prop="uploaderName"
              label="申请人"
              width="100"
              align="center"
          />
          <el-table-column
              label="申请时间"
              width="120"
              align="center"
          >
            <template #default="{row}">
              {{computeDate(row.created_at)}}
            </template>
          </el-table-column>
          <el-table-column
              label="状态"
              align="center"
              width="120"
          >
            <template #default="{row}">
              <el-tag type="info" v-if="row.status === 0">已提交</el-tag>
              <el-tag type="warning" v-else-if="row.status === 1">审批中</el-tag>
              <el-tag type="warning" v-else-if="row.status === 2">已完成</el-tag>
              <el-tag type="info" v-else-if="row.status === 3">已撤销</el-tag>
              <el-tag type="warning" v-else-if="row.status === 4">驳回待修改</el-tag>
              <el-tag type="info" v-else-if="row.status === 5">修改待审批</el-tag>
            </template>
          </el-table-column>
          <el-table-column
              prop="status"
              label="结果"
              align="center"
              width="120"
          >
            <template #default="{row}">
              <el-tag type="warning" v-if="row.result === 0">拒绝</el-tag>
              <el-tag type="success" v-else-if="row.result === 1">通过</el-tag>
              <el-tag type="info" v-else>暂无结果</el-tag>
            </template>
          </el-table-column>
          <el-table-column
              prop="operatorName"
              label="当前/最后审批人"
              align="center"
              width="150"
          />
          <el-table-column
              label="理由/说明/备注"
              width="400"
              align="center"
          >
            <template #default="{row}">
              {{ row.content}}
            </template>
          </el-table-column>
          <el-table-column
              label="操作"
              align="center"
          >
            <template #default="{row}">
              <el-button
                  type="primary"
                  size="small"
                  @click="showDetails(row.approve_id)"
              >
                查看详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

  </div>

  <PreViewDialog ref="preRef"/>
</template>

<script setup>
import {computeDate, createMsg, getUserInfo} from "@/lib/utils"
import {ElButton, ElTable, ElTableColumn, ElTag} from "element-plus"
import PreViewDialog from "@/components/Common/OA/Seal/PreviewSealDialog.vue"
import {onMounted, ref} from "vue"
import {getMyCopySealApprove} from "@/api/OA/Seal"
import emitter from "@/lib/eventBus"
import {getCopy} from "@/api/OA/Approve"

const preRef = ref()
const historyRef = ref()
const tableData = ref([])
let userInfo = {}


onMounted(()=>{
  emitter.emit('home_menu','/OA/seal/copy')
  userInfo = getUserInfo()
  getFlowList()
})

const getFlowList = async () => {
  try {
    const {data:res} = await getCopy(userInfo.id)
    if (res.code === 200){
      tableData.value = res.data
    } else if (res.code === 201){
      // createMsg('暂无数据','info',true)
    } else if (res.code === 400 ||res.code === 401 ||res.code === 402){
      createMsg('未查询到数据','info',true)
    }
  } catch (e) {
    console.log(e)
  }
}

const showDetails = (id) => {
  historyRef.value.show(id)
}
</script>

<style scoped lang="less">
.copy{
  height: 110vh;
  width: 95vw;
  /* border: 1px solid; */
  display: flex;
  margin-left: 5vw;
  .copy_box{
    margin-top: 2vh;
    margin-left: 4vw;
    width: 95%;
    height: 87.5%;
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: 0 0 7px 7px lightgray;
    background-color: rgba(250, 250, 250);
    .el-menu-demo{
      width: 99.5%;
      margin: 5px auto;
    }
    .search-box{
      margin-top: 1vh;
      text-align: left;
      padding-left: 1vw;
    }
    .title-box{
      height: 6vh;
      text-align: left;
      padding-left: 1vw;
      line-height: 6vh;
      font-size: 2.4vh;
      font-weight: 600;
    }
    .copy-table-box{}
  }
}
</style>
